<!-- <template>
    我是登录页面
</template>   模版视图
<script setup>
</script>页面的逻辑
<style> 
</style>      页面的样式 -->
<template>
    <div class="login-page">
        <div class="orange"> </div>
        <div class="blue"></div>
        <div class="blue small"></div>
        <div class="login-box">
            <div class="logo-box">
                <div class="right">
                    <div class="sys-name">⽐特OJ后台管理</div>
                    <div class="sys-sub-name">帮助100万学⽣就业</div>
                </div>
            </div>
            <div class="form-box">
                <div class="form-item">
                    <img src="../assets/images/shouji.png">
                    <el-input v-model="userAccount" placeholder="请输⼊账号" /> <!--使用的是element-plus的组件库-->
                </div>
                <div class="form-item">
                    <img src="../assets/images/yanzhengma.png">
                    <el-input v-model="password" type="password" show-password  placeholder="请输⼊密码" />
                </div>
                <div class="submit-box" @click="loginFun">
                     登录
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>//js处理逻辑
import { ref } from 'vue'
import { loginService } from '@/apis/suser'
import { setToken } from '@/utils/cookie'
import router from '@/router'

//@符号代表的是路径，显示的路径就是鼠标的路径，上面的是别名

const userAccount = ref('')
const password = ref('')
//应该我们点击按钮之后，采取调用方法,监听按钮是否被点击
async function loginFun(){
  try{
    const loginResult=  await loginService(userAccount.value,password.value)
    console.log("loginResult:",loginResult)
    router.push("/oj/layout/question")
    setToken(loginResult.data)

  }catch(error){
  console.log("error",error)
  }

//   if(loginResult.data.code==1000){              //优化点1，对应响应数据的处理     优化点2响应结果正确性的判断 
//                                                 // 假如放到上层就会让所有逻辑都经过，如同拦截器一般
// //登录成功
//   console.log("登录成功")                        

//   }else{
// //登录失败
//   console.log("登录失败")
//   ElMessage.error(loginResult.data.msg)
  //alert('aaa')
 // }
}
// setTimeout(() => {
//     console.log(userAccount.value)
// }, 5000)
</script>
<style lang="scss" scoped>
     //scss就是sass一种语法格式
     .login-page {
         width: 100vw;
         height: 100vh;
         position: relative;
         overflow: hidden;

         .login-box {
             overflow: hidden;

             .logo-box {
                 display: flex;
                 align-items: center;
                 margin-bottom: 30px;

                 img {
                     width: 68px;
                     height: 68px;
                     margin-right: 16px;
                 }

                 .sys-name {
                     height: 33px;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 600;
                     font-size: 24px;
                     color: #222222;
                     line-height: 33px;
                     margin-bottom: 13px;
                 }

                 .sys-sub-name {
                     height: 22px;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 400;
                     font-size: 16px;
                     color: #222222;
                     line-height: 22px;
                 }
             }

             :deep(.form-box) {
                 .submit-box {
                     margin-top: 90px;
                     width: 456px;
                     height: 48px;
                     background: #32C5FF;
                     border-radius: 8px;
                     cursor: pointer;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 600;
                     font-size: 16px;

                     color: #FFFFFF;
                     letter-spacing: 1px;
                 }

                 .form-item {
                     display: flex;
                     align-items: center;
                     width: 456px;
                     height: 48px;
                     background: #F8F8F8;
                     border-radius: 8px;
                     margin-bottom: 30px;
                     position: relative;

                     .code-btn-box {
                         position: absolute;
                         right: 0;
                         width: 151px;
                         height: 48px;
                         background: #32C5FF;
                         border-radius: 8px;
                         top: 0;
                         display: flex;
                         align-items: center;
                         justify-content: center;
                         cursor: pointer;

                         span {
                             font-family: PingFangSC, PingFang SC;
                             font-weight: 400;
                             font-size: 16px;
                             color: #FFFFFF;
                         }
                     }

                     .error-tip {
                         position: absolute;
                         width: 140px;
                         text-align: right;
                         padding-right: 12px;
                         height: 20px;
                         font-family: PingFangSC, PingFang SC;
                         font-weight: 400;
                         font-size: 14px;
                         color: #FD4C40;
                         line-height: 20px;
                         right: 0;

                         &.bottom {
                             right: 157px;
                         }
                     }

                     .el-input {
                         width: 380px;
                         font-family: PingFangSC, PingFang SC;
                         font-weight: 400;
                         font-size: 16px;
                         color: #222222;
                     }

                     .el-input__wrapper {
                         border: none;
                         box-shadow: none;
                         background: transparent;
                         width: 230px;
                         padding-left: 0;
                     }

                     img {
                         width: 24px;
                         height: 24px;
                         margin: 0 18px;
                     }
                 }
             }

             width:456px;
             height:404px;
             background: #FFFFFF;
             box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
             border-radius: 10px;
             opacity: 0.9;
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             z-index: 2;
             padding: 0 72px;
             padding-top: 50px;
         }

         &::after {
             position: absolute;

             top: 0;
             left: 0;
             height: 100vh;
             bottom: 0;
             right: 0;
             background: rgba(255, 255, 255, .8);
             z-index: 1;
             content: '';
         }

         .orange {
             background: #F0714A;
             width: 498px;
             height: 498px;
             border-radius: 50%;
             background: #F0714A;
             opacity: 0.67;
             filter: blur(50px);
             left: 14.2%;
             top: 41%;
             position: absolute;
         }

         .blue {
             width: 334px;
             height: 334px;
             background: #32C5FF;
             opacity: 0.67;
             filter: blur(50px);
             left: 14.2%;
             top: 42%;
             position: absolute;
             top: 16.3%;
             left: 80.7%;

             &.small {
                 width: 186px;
                 height: 186px;
                 top: 8.2%;
                 left: 58.2%;
             }
         }
     }
</style>